{% extends "base.html" %}
{% load static %}
{% block link %}
    <link rel="shortcut icon" href="{% static "image/favicon.ico" %}">
    <link rel="stylesheet" href="{% static "css/common.css" %}">
    <link rel="stylesheet" href="{% static "css/user.css" %}">
{% endblock %}

{% block body %}
    <body class="member">
    <div class="header">
        <a href="/" class="logo"><img src="{% static "image/logo.png" %}"></a>
        <div class="search-box">
            <form id="searchForm" action="{% url 'search:search' 1 %}" method="post">
                {% csrf_token %}
                <div class="search-keyword">
                    <input id="kword" name="kword" type="text" class="keyword" maxlength="120">
                </div>
                <input id="subSerch" type="submit" class="search-button" value="搜 索">
            </form>
            <div id="suggest" class="search-suggest"></div>
            <div class="search-hot-words">
                {% for s in hot_search %}
                    <a target="play" href="{% url 'play:play' s.song.id %}">{{ s.song.name }}</a>
                {% endfor %}
            </div>
        </div>
    </div><!--end header-->

    <div class="nav-box">
        <div class="nav-box-inner">
            <ul class="nav clearfix">
                <li><a href="{% url 'index:index' %}">首页</a></li>
                <li><a href="{% url 'ranking:ranking' %}" target="_blank">歌曲排行</a></li>
            </ul>
        </div>
    </div><!--end nav-box-->

    <div class="mod_profile js_user_data">
        <div class="section_inner">
            <div class="profile__cover_link">
                <img src="{% static "image/user.jpg" %}" class="profile__cover">
            </div>
            <h1 class="profile__tit">
                <span class="profile__name">{{ user.username }}</span>
            </h1>
            <a href="{% url 'user:logout' %}" style="color:white;">退出登录</a>
        </div>
    </div>

    <div class="main main--profile" style="">
        <div class="mod_tab profile_nav" role="nav" id="nav">
            <span class="mod_tab__item mod_tab__current" id="hear_tab">我听过的歌</span>
        </div>
        <div class="js_box" style="display: block;">
            <div class="profile_cont">
                <div class="js_sub" style="display: block;">
                    <div class="mod_songlist">
                        <ul class="songlist__header">
                            <li class="songlist__header_name">歌曲</li>
                            <li class="songlist__header_author">歌手</li>
                            <li class="songlist__header_time">时长</li>
                        </ul>
                        <ul class="songlist__list">
                            {% for item in pages.object_list %}
                                <li>
                                    <div class="songlist__item songlist__item--even">
                                        <div class="songlist__songname">
                                            <a href="{% url 'play:play' item.id %}"
                                               class="js_song songlist__songname_txt">{{ item.name }}</a>
                                        </div>
                                        <div class="songlist__artist">
                                            <a href="javascript:;" class="singer_name">{{ item.singer }}</a>
                                        </div>
                                        <div class="songlist__time">{{ item.time }}</div>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div><!--end mod_songlist-->

                    <!--分页-->
                    <div class="page-box">
                        <div class="pagebar" id="pageBar">
                            {% if pages.has_previous %}
                                <a href="{% url 'user:user' pages.previous_page_number %}" class="prev"
                                   target="_self"><i></i>上一页</a>
                            {% endif %}

                            {% for page in pages.paginator.page_range %}
                                {% if pages.number == page %}
                                    <span class="sel">{{ page }}</span>
                                {% else %}
                                    <a href="{% url 'user:user' page %}" target="_self">{{ page }}</a>
                                {% endif %}
                            {% endfor %}

                            {% if pages.has_next %}
                                <a href="{% url 'user:user' pages.next_page_number %}" class="next" target="_self">下一页<i></i></a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </body>
{% endblock %}